<template>
	<view class="address u-p-r-20 u-p-l-20">
		<view class="list" v-if="list.length>0">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="u-flex u-m-b-20">
					<view class="u-flex u-row-center">
						<view class="name u-font-lg">{{item.name}}</view>
						<text class="u-p-l-10 u-m-r-20 u-font-lg num">{{item.iphone}}</text>
						<u-tag v-if="item.type==0" text="当前地址" size="mini" type="error" mode="plain" />
					</view>
				</view>
				<view class="des">
					{{item.add}}{{item.des}}
				</view>
				<view class="u-flex item-bottom u-row-between u-p-t-10 u-m-t-10">
					<view class="">
						<u-radio-group v-model="value">
							<u-radio  @change="radioChange" active-color="#de4f38" :name="item.type" :size="30">
								<text class="action u-font-md" v-if="value==item.type">默认地址</text>
								<text class="u-font-md" v-else>设为默认</text>
							</u-radio>
						</u-radio-group>
					</view>
					<view class="u-flex">
						<u-button hover-class="none" type="default" class="u-m-r-20" size="mini" shape="circle" @click="edit">编辑</u-button>
						<u-button hover-class="none" type="default" size="mini" :plain="true" shape="circle" @click="del">删除</u-button>
					</view>
					
				</view>
			</view>
		</view>
		<view class="u-p-t-60" v-else>
			<u-empty text="没有收货地址" mode="address"></u-empty>
		</view>
		<view class="add-btn">
			<u-button hover-class="none" type="warning" shape="circle" class="send" @click="add">+新增收货地址</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				list:[{
					name:'张三',
					iphone:'13212345678',
					add:'浙江省杭州市余杭区',
					des:'恒生科技园17幢',
					type:0,
				},{
					name:'张三',
					iphone:'13212345678',
					add:'浙江省杭州市余杭区',
					des:'恒生科技园17幢',
					type:1,
				},{
					name:'张三',
					iphone:'13212345678',
					add:'浙江省杭州市余杭区',
					des:'恒生科技园17幢',
					type:3,
				}]
			}
		},
		methods: {
			add(){
				uni.navigateTo({
					url: '/pages/mine/address/editAddress',
				})			
			},
			edit(){
				this.$refs.uToast.show({
					title: '点击了编辑',
					type: 'success',
				})
			},
			del(){
				this.$refs.uToast.show({
					title: '点击了删除',
					type: 'success',
				})
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
.address{
	.list{
		padding-top: 20rpx;
		.item{
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			.name,.num{
				font-weight: 600;
			}
			.item-bottom{
				border-top: 1px solid #eee;
				.action{ color:#de4f38; }
				color: #333;
			}
			.des{ line-height: 40rpx; } 
			
		}
	}
	
	
	.add-btn{
		width: 80%;
		position: fixed;
		bottom: 140rpx;
		left: 50%;
		margin-left: -40%;
		.send{
			background-color: #de4f38;
		}
	}
}

</style>
